// 后端返回数组数据的处理场景
// 后端返回了一个数组, 对于前端来说，有哪些处理场景

// 1. 前端需要将后端的数据进行遍历并渲染页面
// 场景：表格， 分页
// 细化：移动端分页（把每一页的数据进行了拼接），和后台分页 （根据页码的不同进行数组变量的覆盖）
// let backstage = [后台数组数据]
/*
  移动端分页 每页数据拼接
  arr.push(...backstage)
  [...arr, ...backstage]
  arr.concat(backstage)

  后台分页
  arr = backstage
*/

// 2. 当后端未对返回的数据进行筛选处理时（当前业务可能只需要1个属性的数据，但后端返回了和改属性相关的元素中所有的属性）
// 前端只需要 状态: 已完成、未开始、进行中、已驳回， 后端关于该状态的sql表中有很多个属性： 状态、id、关联组、别称....
// 对于前端来说，接受到的数据结构 [ {a, b, c, d, e....} ] => [{ a }] => [ a的值 ]
// arr.map() => 通过map对数组数据进行重新配置，返回一个新的数组结构
/*
  let backstage = [ { name: { name: '张三' }, age: '12', sex: 'man' } ]
  let newArr = backstage.map(obj => { return obj.name.name })
*/

// 3. 后端返回的数组结构中，不是每一个元素都是前端需要的，前端会通过某个条件来判断需要在页面上展示哪些元素
/*
  let backstage = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  对于前端来说，我只需要显示大于等于5的数据

  在页面上的标签中设置v-if="n >= 5" => 在页面上进行的判断，会消耗浏览器性能，我们尽量在数据阶段就把他解决掉
  let arr = backstage.filter(number => number >= 5)
*/
